<script setup lang="ts">
import { useRandomTestingStore } from '@/pages/RandomTesting/store'
import QuestionTitle from './cmpt/QuestionTitle/QuestionTitle.vue'
import AnswerBox from './cmpt/AnswerBox/AnswerBox.vue'

const rootStore = useRandomTestingStore()
const { plainStore, renderQuestionStore } = rootStore
const { loading, showAnswer } = plainStore
const { answer } = renderQuestionStore
</script>

<template>
  <ASpin wrapperClassName="continer-wrapper" :spinning="loading">
    <QuestionTitle></QuestionTitle>
    <AnswerBox :answer="answer" v-show="showAnswer"></AnswerBox>
  </ASpin>
</template>

<style lang="less" scoped>
.continer-wrapper {
  display: block;
  height: 100%;
  width: 100%;
  flex: auto;
  overflow: auto;

  :deep(.ant-spin-container) {
    display: flex;
    flex-direction: column;
  }
}
</style>
